<template>
    <div>
        <div class="wcgnk">
        <div class="center">
            <div class="zhengti">
                <div class="biaoti">
                    <h2>{{rede.busclass}}</h2>
                    <div class="kuan">
                        <div class="fw">
                            <span  v-for="item in rede.redetalis" :key="item.scid" to="">{{item.vwork}}</span>
                        </div>
                        <div class="gdfu">
                            <span @click="$router.push(`/home/serve/${rede.busclass}`)">更多服务<img src="../assets/right.png" alt=""></span>
                        </div>
                    </div>    
                </div>
                <div class="zhengti2" >
                    <div class="kapian" 
                    v-for="item in rede.sdlist.splice(0,5)" 
                    @click="$router.push(`/home/detail/${item.sdid}`)"
                    :key="item.sdid">
                        <img :src="item.simg" alt="">
                        <h3>{{item.title}}</h3>
                        <p v-html="item.sdecr"></p>
                        <div class="jiage">
                            <p><span>{{item.show_price}}</span>元/小时</p>
                            <button>查看详情</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script setup lang="ts">
import serveYw from '@/types/serveYm'

    interface propp{
        rede:serveYw;
    }
    const props = defineProps<propp>()
</script>

<style lang="scss" scoped>
.wcgnk1 {
		background-color: #fff;
		padding: 20px 0;
	}

	.wcgnk {
		background-color: #FDF7F8;
		padding: 20px 0 30px;
	}

	.zhengti {
		color: #666;
		font-size: 16px;

		.biaoti {
			text-align: center;
			padding-bottom: 30px;

			h2 {
				color: #666;
				padding: 10px;
				font-size: 28px
			}

			.kuan {
				position: relative;

				.fw {
					width: 100%;

					span {
						padding: 15px 20px;
						color: #999;
						text-decoration: none;

						&:hover {
							color: #BF3036;
							border-bottom: 1px solid #BF3036;
						}
					}
				}

				.gdfu {
					position: absolute;
					right: 2px;
					bottom: 2px;

					span {
						display: inline-block;
						cursor: pointer;
						color: #999;	
						font-size: 14px;
						&:active {
							color: #BF3036;
						}

						img {
							display: inline-block;
							margin-left:2px;
							vertical-align: middle;
						}
					}
				}
			}
		}

		.zhengti2 {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;

			.kapian {
				width: 230px;
				padding: 10px 9px;
				background-color: white;
				border: 1px solid #ccc;
				box-shadow: 5px 5px 15px 5px #ccc;
				margin-right: 5px;
				border-radius: 5px;
				text-align: center;
				>p{
					height: 55px;
					padding: 5px 0;
					text-overflow: ellipsis;
					text-align: left;
				}
				&:hover {
					filter: drop-shadow(0em 0 .4em grey);
				}

				img {
					width: 210px;
					height: 210px;
					border-radius: 5px;
				}

				h4 {
					margin: 4px 0 4px;
				}

				p {
					font-size: 14px;
					color: #929292;
					overflow: hidden;
					-webkit-line-clamp: 3;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.jiage {
					display: flex;
					justify-content: space-between;
					margin-top: 3px;
					padding: 3px 5px 0;

					h4 {
						color: #CA3544;

						span {
							font-size: 20px;
							margin: 0 10px 0 10px;
							color: #CA3544;
							font-weight: bold;
						}
					}

					button {
						width: 80px;
						height: 24px;
						line-height: 24px;
						background-color: #CA3544;
						border: none;
						color: white;
						border-radius: 5px;
						font-size: 14px;
						margin-top: 4px;
					}
				}
			}
		}
	}
</style>